<template>
    <div>
      <q-list bordered class="rounded-borders  no-shadow">
        <q-expansion-item
          @show="show"
          switch-toggle-side
          expand-separator
          label="UNSPSC"
        >
          <q-separator />
          <template v-slot:header>
            <div align="right" style="padding-top:5px;">UNSPSC</div>
            <div  style="position: absolute;right:0;z-index:86;margin-right:30px;">
            <q-btn outline color="nlack" :label="$t('保存')" @click.stop="add" style="margin-right:10px;"/>
            <q-btn outline color="nlack" :label="$t('编辑')" @click.stop="add"/>
            </div>
          </template>
          <div>
            <q-input
              filled
              v-model="filter"
            >
              <template v-slot:append>
                <q-icon v-if="filter !== ''" name="search" class="cursor-pointer" @click="resetFilter" />
              </template>
            </q-input>
          </div>
          <q-tree
            style="margin-left:40px;height:400px;overflow-y:auto;"
            :nodes="data"
            node-key="id"
            ref="tree"
            color="primary"
            :expanded.sync="expanded"
            accordion
            :tick-strategy="tickType"
            :selected.sync="selected"
            :ticked.sync="ticked"
            @update:ticked="tickeds"
            @lazy-load="onLazyLoad"></q-tree>
        </q-expansion-item>
        <q-separator />
      </q-list>
    </div>
</template>

<script>

import { required } from 'vuelidate/lib/validators'
// import { transformToTreeFormat } from 'src/utils/fns'
export default {
  name: 'leftNavs',
  props: {
    message: {
      type: String
    },
    nums: {
    }
  },
  data () {
    return {
      seachForm: {
        name: ''
      },
      filter: '',
      data: [],
      ticked: [],
      expanded: [],
      tickStrategy: 'leaf-filtered',
      selected: 0,
      tickType: 'strict',
      nodeExpand: [],
      nodeSelected: '',
      addOrEdit: 1,
      tab: '',
      parentId: '0',
      maximizedToggle: false,
      loadingSave: false,
      addOrEditDialog: false,
      addOrEditForm: {
        name: '',
        nameEn: '',
        increase: 1,
        remark: '',
        sn: '1',
        isLeaf: ''
      },
      typeOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ]
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      increase: { required },
      sn: { required }
    }
  },
  created () {
    // this.ticked = ['c92c1db151af4aff81976229d13afc13', '02e1614f7f6541c78c34a38979ad28e8', 'da2511796a2846e2b8470f92665fcbf5', 'd9e45dabe45b4d6bb0bcaab04dfda193', '444a72949d0143e0871a19b470ac1962', '2c07dbf3dcba4c36b793b6df4f082a31']
  },
  watch: {
    'ticked' () {
      console.log(this.ticked)
    },
    'message': {
      handler (message) {
        this.getTree()
      },
      deep: true
    }
    // 'nums': {
    //   handler (nums) {
    //     if (nums === '') {
    //       nums = ''
    //       this.getTree()
    //     } else {
    //       this.getTree()
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    resetFilter () {
      this.filter = ''
      this.$refs.filter.focus()
    },
    show () {
      this.getTree()
    },
    tickeds (ticked) {
      if (ticked.length > 1) {
        this.ticked = [ticked[1]]
      }
    },
    nodeTicked () {
      console.log(this.$refs.tree.getTickedNodes())
    },
    onLazyLoad ({ node, key, done, fail }) {
      console.log(node)
      this.parentId = node.id
      this.$api({
        method: 'post',
        url: '/mdm/unspsc/selectUnspscByTurn',
        params: {
          parentId: this.parentId
        },
        emulateQS: true,
        emulateJSON: false,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          let simple = {}
          for (let i = 0; i < data.length; i++) {
            simple.id = data[i].id
            simple.parentId = data[i].parentId
            simple.label = data[i].name
            if (data[i].grade < 3 || data[i].garde === 3) {
              simple.lazy = true
            } else {
              simple.lazy = false
            }
            arr.push(simple)
            simple = {}
          }
          done(arr)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async findtree () {
      console.log('1111111')
      this.number = 2
      await this.$api({
        method: 'post',
        url: '/mdm/unspsc/getUnspscTreeBySearch',
        params: {
          name: this.filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          let expandeds = []
          let selecteds = ''
          let name = this.filter
          this.data = data
          function findId (arr) {
            for (let i in arr) {
              if (arr[i].children instanceof Array) {
                findId(arr[i].children)
                expandeds.push(arr[i].id)
              } else {
                if (arr[i].label === name) {
                  selecteds = arr[i].id
                  expandeds.push(arr[i].id)
                  break
                }
              }
            }
          }
          findId(this.data)
          this.selected = selecteds
          this.expanded = expandeds
          return this.data
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: '/mdm/unspsc/selectUnspscByTurn',
        params: {
          id: this.id,
          parentId: this.parentId
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          let simple = {}
          for (let i = 0; i < data.length; i++) {
            simple.id = data[i].id
            simple.parentId = data[i].parentId
            simple.label = data[i].name
            if (data[i].grade < 3 || data[i].garde === 3) {
              simple.lazy = true
            } else {
              simple.lazy = false
            }
            arr.push(simple)
            simple = {}
          }
          this.data = arr
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
